<template>
  <div class="container">
    <!-- 头部 -->
    <Header :showBack="$route.path !== '/home'" />

    <!-- 视图 -->
    <transition name="fade">
      <keep-alive exclude="AddressUpdate,CategoryList,SearchBox,GoodsDetail,ShopCart">
        <router-view></router-view>
      </keep-alive>
    </transition>

    <!-- 底部导航 -->
    <tab-bar />
  </div>
</template>

<script>
//引入底部导航组件
import TabBar from "components/common/Tabbar.vue";
import Header from "components/common/Header.vue";

export default {
  created(){
    this.$store.commit("getInfo");
    this.$store.commit("getCart");
  },
  // 监听
  watch: {
    "$route.path"(newVal) {
      this.showBack = newVal !== "/home"; // 等于/home时showback为false
    },
  },
  components: {
    TabBar,
    Header,
  },
};
</script>
<style lang="scss" scoped>
@import "assets/css/base.css";
@import url("https://at.alicdn.com/t/font_3104483_n1jyhuwrs7.css");

.container {
  --header-height: 40px;
  --tabbar-height: 50px;
  --viewport-height: calc(
    100vh - (var(--header-height) + var(--tabbar-height))
  );

  padding-top: var(--header-height);
  padding-bottom: var(--tabbar-height);
  overflow-x: hidden;
}
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
</style>

